<template>
  <u-popup :show="is_info" :safeAreaInsetBottom="false" mode="bottom" round="24rpx" zIndex="999999">
    <view class="userInfo position-relative">
      <view class="position-absolute" style="right: 40rpx; top: 40rpx" @click="is_info = false">
        <u-icon name="close" color="#000" size="34rpx"></u-icon>
      </view>
      <view class="font-34 font-weight-middle">完善个人信息</view>
      <view class="font-28 text-666 m-t-10">完善您的头像、昵称、手机号，主要用于准确发放活动奖品、优惠券，同时方便用户查看邀请记录</view>
      <u-line color="#F0F0F0" margin="20rpx 0"></u-line>
      <view class="flex justify-between align-center align-center">
        <view class="font-28 flex-1">头像</view>
        <button class="flex-3" open-type="chooseAvatar" @chooseavatar="chooseavatar">
          <u-avatar :src="formData.avatar" size="86rpx"></u-avatar>
        </button>
        <u-icon name="arrow-right" size="15rpx"></u-icon>
      </view>
      <u-line color="#F0F0F0" margin="20rpx 0"></u-line>
      <view class="flex justify-between align-center align-center">
        <view class="font-28 flex-1">昵称</view>
        <view class="flex-3">
          <input type="nickname" v-model="formData.nickName" placeholder="请输入昵称" />
        </view>
        <u-icon name="arrow-right" size="15rpx"></u-icon>
      </view>
      <u-line color="#F0F0F0" margin="20rpx 0"></u-line>
      <view class="flex justify-between align-center align-center">
        <view class="font-28 flex-1">手机号</view>
        <button class="flex-3" open-type="getPhoneNumber" @getphonenumber="getphonenumber">
          <input type="text" disabled v-model="formData.mobile" placeholder="一键授权手机号" readonly />
        </button>
        <u-icon name="arrow-right" size="15rpx"></u-icon>
      </view>
      <u-line color="#F0F0F0" margin="20rpx 0"></u-line>
      <view class="flex align-center justify-center m-y-30 text">
        <view class="raido m-r-10" @click="isAgree = !isAgree">
          <view class="true" v-if="isAgree"></view>
        </view>
        我已阅读并同意
        <text @click="show = true; rule = 1;
        ">
          《用户隐私政策条款》
        </text>
        和
        <text @click="
          show = true;
        rule = 2;
        ">
          《平台用户协议》
        </text>
      </view>
      <view class="flex justify-center">
        <view class="btn flex-cen" @click="perfect_info">提交</view>
        <!-- <u-image :src="ASSETSURL + 'open.png'" width="279rpx" height="86rpx" @click="perfect_info"></u-image> -->
      </view>
      <!-- 规则弹窗 -->
      <!-- <u-popup :show="show" bgColor="transparent" @close="show = false" mode="center" :safeAreaInsetBottom="false">
				<view class="">
					<view class="popup" ="{ 'background-image': `url(${ASSETSURL}rule/${rule}/bg.png)` }">
						<view class="content">
							<block v-for="(item, index) in rule == 1 ? 7 : 3" :key="index">
								<image :src="`${ASSETSURL}rule/${rule}/${index + 1}.png`" mode="widthFix" style="width: 100%; height: 300rpx"></image>
							</block>
						</view>
					</view>
					<view class="m-t-60 flex justify-center" @click="show = false" style="100%">
						<u-image :src="ASSETSURL + 'rule/close.png'" width="58rpx" height="58rpx"></u-image>
					</view>
				</view>
			</u-popup> -->
    </view>
  </u-popup>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { baseUrl } from '../api/app'
import { LoginCenterApi } from '../api/serves'
import { getCurrentInstance } from 'vue'

// 获取全局工具方法
const { proxy } = getCurrentInstance()
const $tool = proxy.$tool

// 响应式状态
const show = ref(false)
const rule = ref(1)
const is_info = ref(false)
const isAgree = ref(false)
const formData = reactive({
  avatar: '', //头像
  nickName: '', //微信昵称
  mobile: '' //手机号码
})

// 方法定义
const open = () => {
  const userInfo = proxy.userInfo
  for (let k in formData) {
    formData[k] = userInfo[k]
  }
  is_info.value = true
}

const perfect_info = () => {
  for (let k in formData) {
    if (!formData[k]) return $tool.alert('请完善信息')
  }
  if (!isAgree.value) return $tool.alert('请阅读并同意《用户隐私政策条款》和《平台用户协议》')

  LoginCenterApi.perfect_info({ ...formData }).then(({ code, data, msg }) => {
    if (code != 1) return $tool.alert(msg)
    proxy.getUserInfo()
  })
}

const getphonenumber = async (e) => {
  if (!e.detail.encryptedData) return $tool.alert('授权失败')
  console.log(e)
  const { code, data, msg } = await LoginCenterApi.decryptData({
    encryptDataB64: e.detail.encryptedData,
    sessionKeyB64: $tool.storage('token').sessionKey,
    ivB64: e.detail.iv
  })
  if (code != 1) return $tool.alert(msg)
  formData.mobile = data.phoneNumber
}

const chooseavatar = (e) => {
  uni.uploadFile({
    url: baseUrl + 'file/upload',
    filePath: e.detail.avatarUrl,
    name: 'file',
    header: {
      Authorization: $tool.storage('token').token
    },
    success: (res) => {
      console.log(res)
      formData.avatar = JSON.parse(res.data).data
    }
  })
  console.log(e.detail.avatarUrl)
}

// 暴露方法供父组件调用
defineExpose({
  open
})
</script>

<style scoped lang="scss">
.popup {
  width: 743rpx;
  height: 1043rpx;
  background-size: 100%;
  background-repeat: no-repeat;

  .content {
    width: 75%;
    height: 70%;

    margin: 18% auto 0;
  }
}

.userInfo {
  width: 750rpx;
  min-height: 663rpx;
  flex-shrink: 0;
  padding: 50rpx 30rpx;

  button::after {
    border: none;
  }

  button {
    position: relative;
    display: block;
    margin: 0;
    left: 0;
    box-sizing: border-box;
    text-align: left;
    text-decoration: none;
    overflow: hidden;
    padding: 0;
    background-color: transparent;
  }

  input {
    width: 379rpx;
    height: 80rpx;

    color: #666;
    font-size: 28rpx;
  }
}

.text {
  text {
    color: #3286c1;
  }

  .raido {
    width: 26rpx;
    height: 26rpx;
    border-radius: 50%;
    background-color: transparent;
    border: solid 2rpx #3286c1;
    padding: 2rpx;

    .true {
      width: 18rpx;
      height: 18rpx;
      flex-shrink: 0;
      border-radius: 50%;
      background-color: #3286c1;
    }
  }
}

.btn {
  width: 280rpx;
  height: 86rpx;
  background-color: #3286c1;
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
